<template>
    <show-modal :title="title" :loading="loading" width="800px" @cancel="cancel" :isSure="false">
        <echart-trend :type="type" :info="info" isFlag isDouble class="chart_item"/>
    </show-modal>
</template>
<script>
import EchartTrend from './EchartTrend'
export default {
    name:'TrendItemDetail',
    components:{
        EchartTrend
    },
    props:{
        info:{
            type:Object,
            default:()=>{}
        },
        type:{
            type:String,
            default:''
        },
        subTitle:{
            type:String,
            default:""
        }
    },
    data(){
        return{
            title:'',
            loading:false,
        }
    },
    created(){
        let {jarName} = this.info;
        let type = this.type;
        let typeName = '';
        switch(type){
            case 'day':
                typeName = '日液位';
                break;
            case 'week':
                typeName="周液位";
                break;
            case 'month':
                typeName = '月使用量';
                break;
            case 'year':
                typeName="年使用量";
                break;
            
        }
        this.title = jarName+typeName+'趋势图'
    },
    methods:{
        cancel(){
            this.$emit('cancel')
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .ant-drawer-wrapper-body{
    background: #f2f2f2;
}
.chart_item{
    width: 100%;
    height: calc(100vh - 180px);
}
</style>